<template>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <div class="box">
        <button id="backToTop" class="back-to-top" title="返回顶部">
            <i class="fa fa-arrow-up"></i>
        </button>

        <!-- 顶部主体部分 -->
        <div class="office-system">
            <header class="header">
                <h2 style="color: #1e3a8a">欢迎来到捷报</h2>
                <nav>
                    <ul>
                        <li style="cursor: pointer" @click="skip">
                            <el-text><el-icon style="margin: 0px">
                                    <User />
                                </el-icon>前往登录</el-text>
                        </li>
                    </ul>
                </nav>
            </header>
            <div>
                <el-row>
                    <el-col :span="18">
                        <img src="../assets/image/index/swiper.jpg" alt="" width="99.4%" height="370px" />
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <span style="font-weight: bold">快捷方式</span>
                        </el-card>
                        <el-card style="height: 305px">
                            <el-row>
                                <el-col span="2"><el-button class="custom-button" @click="skipBrief('公司简介')"><el-icon>
                                            <OfficeBuilding />
                                        </el-icon>公司简介</el-button></el-col>
                                <el-col span="2"><el-button class="custom-button" @click="skipBrief('发展历程')"><el-icon>
                                            <DataLine />
                                        </el-icon>发展历程</el-button></el-col>
                                <el-col span="2"><el-button class="custom-button" @click="skipBrief('技术优势')"><el-icon>
                                            <CopyDocument />
                                        </el-icon>技术优势</el-button></el-col>
                                <el-col span="2"><el-button class="custom-button" @click="skipBrief('联系我们')"><el-icon>
                                            <Briefcase />
                                        </el-icon>联系我们</el-button></el-col>
                                <!-- <el-col span="2"><el-button class="custom-button"
                                        @click="data.dialogVisible = true"><el-icon>
                                            <Calendar />
                                        </el-icon>预约面试</el-button></el-col> -->
                                <el-col span="2" style="position: relative; left: 180px; top: 13px">
                                    <!-- <p>访客数量：<span class="visitor-count"></span></p> -->
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 10px">
                    <el-col :span="18">
                        <el-card style="
                background-color: white;
                height: 200px;
                margin-right: 10px;
                border-radius: 8px;
              ">
                            <div style="padding: 5px 10px">
                                <el-button color="#626aef" size="small" @click="load('媒体报道')">媒体报道</el-button>
                                <el-button color="#626aef" size="small" @click="load('行业报道')">行业报道</el-button>
                                <el-button color="#626aef" size="small" @click="load('政策动态')">政策动态</el-button>
                                <el-button color="#626aef" size="small" @click="load('签约喜讯')">签约喜讯</el-button>
                            </div>
                            <div style="padding: 5px">
                                <ul class="medias" v-for="item in data.report" :key="item">
                                    <li>{{ item.title }}</li>
                                </ul>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <span style="font-weight: bold">通知公告</span>
                            <div style="overflow-y: auto; height: 137px">
                                <ul class="medias" v-for="item in data.official" :key="item">
                                    <li>{{ item.title }}</li>
                                </ul>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 最新公文 -->
                <div style="margin-top: 10px; font-weight: bold"></div>
                <el-row>
                    <el-col :span="9">
                        <el-card style="margin-right: 10px">
                            <span style="font-weight: bold">最新公文</span>
                            <div style="overflow-y: auto; height: 165px">
                                <ul class="medias" v-for="item in data.official" :key="item">
                                    <li>{{ item.title }}</li>
                                </ul>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="9">
                        <el-card style="margin-right: 10px">
                            <span style="font-weight: bold">最热知识</span>
                            <div style="overflow-y: auto; height: 165px">
                                <ul class="medias" v-for="item in data.knowledge" :key="item">
                                    <li>{{ item.title }}</li>
                                </ul>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <span style="font-weight: bold">制度规范</span>
                            <div style="overflow-y: auto; height: 165px">
                                <ul class="medias" v-for="item in data.standard" :key="item">
                                    <li>{{ item.title }}</li>
                                </ul>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 公司简介部分 -->
        <div class="custom-table-container">
            <div class="title-container">
                <span class="title">简介</span>
            </div>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>技术类别</th>
                        <th>智能日程</th>
                        <th>安全邮件</th>
                        <th>远程办公</th>
                        <th>任务跟踪</th>
                        <th>协作空间</th>
                        <th>沟通舟</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>公司目标</td>
                        <td colspan="6">
                            我们是一支团结奋进的团队，每一位成员都是梦想的筑造者。我们携手共进，用信任与协作书写属于我们的辉煌篇章，让团队的力量成为我们最坚实的后盾。
                        </td>
                    </tr>
                    <tr>
                        <td>使命愿景</td>
                        <td>市场先锋，共赢天下</td>
                        <td>温暖守护，心之所向</td>
                        <td>人才沃土，共筑梦想</td>
                        <td>财富基石，稳健前行</td>
                        <td>品牌之光，闪耀世界</td>
                        <td>创新引擎，智启未来</td>
                    </tr>
                    <tr>
                        <td>团队介绍</td>
                        <td>
                            研发部门：智慧和汗水，将创意转化为现实，为公司的发展注入源源不断的动力
                        </td>
                        <td>
                            客户服务部门：专业和贴心，为客户提供全方位的服务支持，是公司与客户之间的桥梁
                        </td>
                        <td>
                            市场与品牌部门：专业和创意，为公司的市场拓展和品牌建设做出了重要贡献
                        </td>
                        <td>
                            行政后勤：专业和热情，为员工创造了良好的工作环境，是公司发展的坚实基础
                        </td>
                        <td>
                            财务部门：严谨和细致，确保了公司财务的健康和安全，是公司发展的坚实后盾
                        </td>
                        <td>
                            人力资源：智慧和热情，打造了一支高效、和谐的团队，为公司的发展提供了坚实的人才保障
                        </td>
                    </tr>
                    <tr>
                        <td>核心能力</td>
                        <td>将智慧和汗水投入到产品和技术的研发中，为公司的发展注入动力</td>
                        <td>作为公司与客户之间的桥梁，建立和维护良好的客户关系</td>
                        <td>通过专业和创意，推动公司的市场拓展</td>
                        <td>为员工创造良好的工作环境，提高工作效率</td>
                        <td>通过专业的财务管理，控制公司运营风险</td>
                        <td>智慧和热情地打造高效、和谐的团队，为公司发展提供人才保障</td>
                    </tr>
                    <tr>
                        <td>行业价值</td>
                        <td>
                            智能日程通过自动化工具帮助个人和团队更有效地管理时间，减少浪费，通过优化日程安排，减少会议和任务的时间冲突，提高整体工作效率
                        </td>
                        <td>
                            提供安全的邮件传输和存储，减少沟通困难，帮助企业满足行业法规和标准，维护了公司的信誉和客户信任
                        </td>
                        <td>
                            降低办公成本，提高企业的运营效率，灵活应对市场变化，同时提高员工的工作生活平衡
                        </td>
                        <td>
                            增强团队协作，提高项目管理的透明度，帮助公司更有效地管理资源，确保项目目标的实现
                        </td>
                        <td>
                            提高团队沟通效率，减少误解和冲突，协作空间作为团队合作的平台，帮助公司培养创新文化和提高团队效率
                        </td>
                        <td>
                            提供高效的沟通渠道，促进信息流通，提高公司的决策效率，通过快速的信息传递，支持管理层做出更及时的决策
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 公司的发展历程 -->
        <div id="course">
            <div class="timeline">
                <div class="title">
                    <h1>乘风破浪，开拓未来</h1>
                    <p>企业历程</p>
                </div>
                <div class="history">
                    <div v-for="(item, index) in data.develop" :key="index" class="history-item">
                        <div class="year">{{ item.year }}</div>
                        <div class="description">{{ item.description }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 技术优势 -->
        <div>
            <div class="dashboard" style="color: #007bff">
                <header>
                    <h1>办公系统技术优势</h1>
                </header>
                <main>
                    <section class="chart-section">
                        <h2>极速办公：效率与响应</h2>
                    </section>
                    <el-row>
                        <el-col :span="12">
                            <section class="info-section" style="margin-left: 20px; height: 200px; width: 800px">
                                <h2>系统响应时间底</h2>
                                <br />
                                <ul>
                                    <li>支持高速数据传输，满足大数据环境下的业务需求。</li>
                                    <li>
                                        我们的办公系统设计注重速度和效率，确保用户操作能够得到快速响应。200毫秒的响应时间意味着从用户发出指令到系统给出反馈的时间极短，极大提升了用户体验和工作效率。
                                    </li>
                                </ul>
                            </section>
                        </el-col>
                        <el-col :span="12">
                            <section class="info-section" style="height: 200px; width: 800px; margin-left: 20px">
                                <h2>可扩展性</h2>
                                <br />
                                <ul>
                                    <li>
                                        系统提供开放的API接口，方便与其他系统进行集成，支持数据交换和业务流程自动化。
                                    </li>
                                    <li>
                                        支持根据企业特定需求进行定制化开发，满足个性化业务需求。
                                    </li>
                                    <li>
                                        系统架构设计灵活，能够根据企业的成长和变化轻松扩展，无需担心系统性能瓶颈。
                                    </li>
                                </ul>
                            </section>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12" style="margin-top: 50px">
                            <section class="info-section" style="margin-left: 20px; height: 200px; width: 800px">
                                <h2>权限管理</h2>
                                <br />
                                <ul>
                                    <li>
                                        办公系统采用多级权限管理机制，根据用户的角色和职责分配不同的访问权限，确保用户只能接触到其工作范围内相关的数据和功能，从而有效防止数据的越权访问和滥用。
                                    </li>
                                    <li>
                                        通过严格的权限设置，限制用户对敏感数据的操作和访问，只有经过授权的用户才能进行查看、编辑或下载等操作，从而有效防止数据泄露和非法访问，保障企业信息安全。
                                    </li>
                                </ul>
                            </section>
                        </el-col>
                        <el-col :span="12" style="margin-top: 50px">
                            <section class="info-section" style="height: 200px; width: 800px; margin-left: 20px">
                                <h2>协同工作能力</h2>
                                <br />
                                <ul>
                                    <li>
                                        支持多人同时在线编辑文档、共享资源，增强了团队协作效率。
                                    </li>
                                    <li>
                                        集成即时通讯、邮件等功能，方便团队成员之间的沟通与协作，减少信息传递的延迟。
                                    </li>
                                    <li>
                                        通过文档共享、任务管理等功能，团队成员可以快速共享资源，实时协作处理项目任务。这种资源共享机制不仅提高了工作效率，还减少了因信息不对称导致的沟通成本。
                                    </li>
                                </ul>
                            </section>
                        </el-col>
                    </el-row>
                </main>
            </div>
        </div>

        <!-- 换色渐变部分 -->
        <div class="gradient-background">
            <div class="content">
                <div class="image-section">
                    <img src="../assets/image/index/run.png" alt="Brain" class="brain-image" />
                </div>
                <div class="text-section">
                    <!-- &ndash;破折号 -->
                    <h1>捷报办公系统 &ndash; 实时供办公信息</h1>
                    <p>Jiebao Office System: Real-time Office Information Supply</p>
                    <p>
                        通过持续的监测，企业可以及时了解供应链中的变化，确保业务连续性和数据完整性。通过捷报办公系统，企业不仅能够提高办公效率，真正实现安全快人一步。
                    </p>
                </div>
            </div>
        </div>

        <!-- 渐变橙色部分 -->
        <div class="security-audit-page">
            <div class="content">
                <div class="text-section">
                    <h1>提升办公效率，保障信息安全：捷报办公系统</h1>
                    <p>
                        ITAL（Information Technology Application Innovation），Supply Chain
                        Security Censorship
                    </p>
                    <p>
                        在团队协作和沟通中，捷报办公系统保障信息传输的便捷和安全，也可以团队实时监控任务进度，确保项目资源的安全和合规。
                    </p>
                </div>
                <div class="image-section" style="background-color: #af8bd2">
                    <img src="../assets/image/index/fast.png" alt="Dashboard" class="dashboard-image" />
                </div>
            </div>
        </div>

        <!-- 联系我们 -->
        <div class="contact-us">
            <div class="banner">
                <img src="../assets/image/index/relation.png" alt="Contact Us Banner" />
                <div class="banner-text">联系我们</div>
            </div>
            <div class="contact-methods">
                <h2>联系方式</h2>
                <el-row :gutter="20" class="methods-row">
                    <el-col :span="6" v-for="(method, index) in data.relation" :key="index">
                        <div class="method-item">
                            <img :src="method.icon" style="width: 85px; height: 85px" alt="" />
                            <div>{{ method.title }}</div>
                            <div>{{ method.description }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 预约面试的对话框 -->
        <el-dialog v-model="data.dialogVisible" title="预约面试" width="650" :before-close="handleClose">
            <div class="scrolling-notice-container">
                <div class="scrolling-notice">
                    您好！感谢您选择预约面试。为确保面试流程顺利进行，请您在填写信息时务必真实、准确。
                </div>
            </div>

            <el-form ref="formRef" :rules="data.rules" :label-position="labelPosition" label-width="auto"
                :model="data.form" style="max-width: 600px">
                <el-form-item label="真实姓名" :label-position="itemLabelPosition" @input="validateChinese()" prop="name">
                    <el-input v-model="data.form.name" maxlength="5" />
                </el-form-item>
                <el-form-item label="真实性别" label-position="right" prop="sex">
                    <el-radio-group v-model="data.form.sex" aria-label="label position">
                        <el-radio-button value="1">男</el-radio-button>
                        <el-radio-button value="2">女</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="真实年龄" prop="age">
                    <el-input-number style="width: 260px" v-model="data.form.age" :min="18" :max="60" />
                </el-form-item>

                <el-form-item label="面试部门" prop="departmentId">
                    <el-select v-model="data.form.departmentId" placeholder="请选择心仪的部门">
                        <el-option label="生产部门" :value="1"></el-option>
                        <el-option label="销售部门" :value="2"></el-option>
                        <el-option label="财务部门" :value="3"></el-option>
                        <el-option label="人事部门" :value="4"></el-option>
                        <el-option label="采购部门" :value="5"></el-option>
                        <el-option label="行政部门" :value="6"></el-option>
                        <el-option label="it部门" :value="7"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="联系方式" prop="email">
                    <el-input v-model="data.form.email" maxlength="25" />
                </el-form-item>

                <el-form-item label="补充说明" :label-position="itemLabelPosition">
                    <el-input v-model="data.form.remark" type="textarea" maxlength="100" show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.form = {}">清 除</el-button>
                    <el-button type="primary" @click="confirmInterviewee">
                        确 定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

    

</template>

<script setup>
import { reactive, ref, watch, onBeforeMount, nextTick } from "vue";
import * as echarts from "echarts";
import {
    addInterviewee,
    getHeadlineNameByType,
    getInformNameByType,
    getKnowledgeNameByType,
    getOfficialNameByType,
    getStandardNameByType,
} from "@/api/home";
import { ElMessage } from "element-plus";
import Wechat from "@/assets/image/index/weixin.png";
import Qq from "@/assets/image/index/QQ.jpg";
import PhoneIcon from "@/assets/image/index/serve.webp";
import Mail from "@/assets/image/index/email.png";
import router from "@/router";
import { useUserStore } from "@/stores/user.js";
import instance from "@/untils/request.js";

onBeforeMount(() => {
    noToken();
})



nextTick(() => {
    const backToTopButton = document.getElementById("backToTop");
    backToTopButton.addEventListener("click", () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth" // 平滑滚动
        })
    })

    // 滚动页面时触发的事件
    window.addEventListener("scroll", () => {   
        const scrollHeight = document.documentElement.scrollTop;
        if (scrollHeight > 200) {
            backToTopButton.style.display = 'block'
        } else {
            backToTopButton.style.display = 'none'
        }
    })
})

const noToken = () => {
    useUserStore().token = null;
    instance.interceptors.request.use(
        (config) => {
            if (config.headers) {
                delete config.headers.token;
            }
            return config;
        },
        (err) => Promise.reject(err)
    )
}

const data = reactive({
    images: [],
    report: [], //报道数据容器
    inform: [], //通知公告的容器
    official: [], //最新公文
    knowledge: [], //最热知识
    standard: [], //制度规范

    develop: [
        { year: "2024/7/24", description: "相识：团队相识，相互鼓励" },
        { year: "2025/3/1", description: "潮涌新航：乘风逐新，扬帆远航" },
    ],

    relation: [
        { icon: Wechat, title: "微信", description: "WJC1942131027" },
        { icon: Qq, title: "客服QQ", description: "1942131027" },
        { icon: PhoneIcon, title: "服务咨询", description: "15064770737" },
        { icon: Mail, title: "企业邮箱", description: "15064770737@163.com" },
    ], //联系我们的数据

    dialogVisible: false, //预约面试的对话框的控制器
    form: {}, //面试人员的信息

    rules: {
        name: [
            { required: true, message: "请输入姓名", trigger: "blur" },
            // { validator: validateChinese, trigger: 'blur' }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        email: [{ required: true, message: "手机号或邮箱", trigger: "blur" }],
        departmentId: [
            { required: true, message: "请输选择面试部门", trigger: "blur" },
        ],
    },
})

const formRef = ref();

const skip = () => {
    router.push("/login")
}

//关闭对话框
const handleClose = () => {
    data.dialogVisible = false;
    data.form = {};
    formRef.value.resetFields();
}

//输入中文的实时监督
const validateChinese = () => {
    if (!data.form.name) {
        if (!/^[\u4e00-\u9fa5]+$/.test(data.form.name)) {
            data.form.name = "";
            ElMessage.info("请输入中文");
        }
    }
}

const confirmInterviewee = async () => {
    await formRef.value.validate((valid) => {
        if (valid) {
            addInterviewee(data.form).then((res) => {
                data.dialogEdit = false;
                if (res.data.code == "200") {
                    ElMessage.success("面试申请成功!")
                    data.dialogVisible = false;
                    data.form = {};
                    formRef.value.resetFields()
                } else {
                    ElMessage.error("操作失败")
                }
            });
        } else {
            ElMessage.error("表单验证失败")
        }
    })
}

const skipBrief = (value) => {
    const viewportHeight = window.innerHeight + 20;
    if (value == "公司简介") {
        window.scrollTo(0, viewportHeight * 1);
    }
    if (value == "发展历程") {
        window.scrollTo(0, viewportHeight * 2);
    }
    if (value == "技术优势") {
        window.scrollTo(0, viewportHeight * 3);
    }
    if (value == "联系我们") {
        window.scrollTo(0, viewportHeight * 6);
    }
};

const load = async (type) => {
    if (!type) {
        type = "媒体报道";
    }
    await getHeadlineNameByType(type).then((res) => {
        if (res.data.code == "200") {
            data.report = res.data.data;
        } else {
            ElMessage.error("服务异常");
        }
    });

    await getInformNameByType().then((res) => {
        if (res.data.code == "200") {
            data.inform = res.data.data;
        } else {
            ElMessage.error("服务异常");
        }
    });

    await getOfficialNameByType().then((res) => {
        if (res.data.code == "200") {
            data.official = res.data.data;
        } else {
            ElMessage.error("服务异常");
        }
    });

    await getKnowledgeNameByType().then((res) => {
        if (res.data.code == "200") {
            data.knowledge = res.data.data;
        } else {
            ElMessage.error("服务异常");
        }
    });

    await getStandardNameByType().then((res) => {
        if (res.data.code == "200") {
            data.standard = res.data.data;
        } else {
            ElMessage.error("服务异常");
        }
    });
};

load();
</script>

<style scoped>
.back-to-top {
    display: none;
    position: fixed;
    z-index: 999;
    bottom: 25px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

.back-to-top:hover {
    background-color: #555;
}

.back-to-top i {
    font-size: 18px;
    line-height: 40px;
    text-align: center;
}

/* 主体部分 */
.box {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.box::-webkit-scrollbar {
    display: none;
}

.office-system {
    height: 100vh;
    max-width: 2200px;
    margin: 0 auto;
    background-color: #e9f6f4;
}

.header {
    background: linear-gradient(to bottom, #aad4fb, #e6f1fb);
    padding: 22px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.header nav ul li {
    margin-right: 20px;
}

.header nav ul li:last-child {
    margin-right: 0px;
}

.slideshow {
    background: gray;
}

/* 快捷方式 */
.custom-button {
    background-color: #448ef2;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    margin-left: 25px;
    margin-top: 25px;
}

.custom-button:hover {
    background-color: #3a7bd5;
    transform: scale(1.05);
}

/* 访客数量显示样式 */
.visitor-count {
    font-weight: bold;
    color: #448ef2;
}

/* 媒体报道 */
.medias {
    list-style-type: disc;
    list-style-position: inside;
    padding: 5px;
}

.medias li {
    cursor: pointer;
}

/* 面试对话框提示 */
.scrolling-notice-container {
    position: relative;
    overflow: hidden;
    height: 50px;
}

.scrolling-notice {
    position: absolute;
    white-space: nowrap;
    animation: scrollNotice 20s linear infinite;
}

@keyframes scrollNotice {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 公司简介部分 */
.custom-table-container {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 50px 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background-image: url('../assets/image/index/列车开往这春天，所有梦想都实现.png'); */
}

.title-container {
    text-align: center;
    margin-bottom: 20px;
}

.title {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-table th,
.custom-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.custom-table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.custom-table tbody tr:hover {
    background-color: #e6f7ff;
}

.custom-table tbody td[colspan="6"] {
    text-align: justify;
    padding: 20px;
    border-bottom: 2px solid #ccc;
}

@media (max-width: 768px) {
    .custom-table {
        font-size: 14px;
    }
}

/* 公司发展历程的部分 */
#course {
    height: 100vh;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
    background: linear-gradient(to bottom, #e0f7fa, #71c69f);
    /* background-image: url('../assets/image/index/course.jpg'); */
    background-size: cover;
    background-position: center;
}

.timeline {
    position: relative;
    max-width: 2200px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.2);
}

.title h1 {
    font-size: 100px;
    color: #42b983;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.title p {
    font-size: 80px;
    color: #42b983;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.history {
    position: relative;
    padding: 50px 0;
}

.history-item {
    padding: 20px;
    border: 1px solid #42b983;
    border-radius: 10px;
    margin-bottom: 20px;
}

.year {
    font-size: 2em;
    font-weight: bold;
    color: #42b983;
}

.description {
    font-size: 1em;
    color: #555;
}

/* 公司的技术优势 */
.dashboard {
    height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 50px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #c5e8ed, #7b7b00);
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

.chart-section {
    margin-bottom: 40px;
}

.chart-container {
    width: 100%;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

.bar-chart {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.bar {
    width: 20%;
    background-color: #42a5f5;
    margin-right: 10px;
    border-radius: 4px;
}

.bar:last-child {
    margin-right: 0;
}

.info-section {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.dashboard ul {
    list-style-type: none;
    padding: 0;
}

.dashboard ul li {
    margin-bottom: 10px;
    color: #555;
}

.dashboard h1,
.dashboard h2 {
    color: #333;
}

.el-row {
    margin-bottom: 20px;
}

/* 第一个下滑部分 */
.gradient-background {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom right, #000000, #ffff00);
    overflow: hidden;
}

.content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.image-section {
    max-width: 50%;
}

.brain-image {
    width: 100%;
    border-radius: 50%;
}

.text-section {
    max-width: 50%;
    padding-left: 20px;
}

.text-section h1 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.text-section p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* 第二个下滑部分 */
/* 使页面至少占满整个视口高度 */
.security-audit-page {
    display: flex;
    max-width: 2200px;
    min-height: 100vh;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
    background: linear-gradient(to right, #f0a500, #b83ab8);
    color: #333;
    margin: 0 auto;
}

.content {
    display: flex;
    width: 100%;
}

.text-section {
    max-width: 50%;
    padding-right: 20px;
}

.text-section h1 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

.text-section p {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 10px;
}

.image-section {
    flex-grow: 1;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.dashboard-image {
    width: 100%;
    height: auto;
}

/* 联系我们 */
.contact-us {
    height: 100vh;
    text-align: center;
    background-color: #ffffff;
    /* 白色背景 */
}

.banner {
    position: relative;
    color: white;
    background-image: linear-gradient(to right, #5c258d, #4389a2);
}

.banner img {
    width: 100%;
    height: 80vh;
}

.banner-text {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: bold;
    background: -webkit-linear-gradient(#be0f91, #ffffff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.contact-methods {
    margin-top: 50px;
}

.methods-row {
    display: flex;
    justify-content: center;
}

.method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.method-item .el-icon {
    font-size: 2em;
    margin-bottom: 10px;
    color: #5c258d;
    /* 紫色图标 */
}

.method-item div {
    color: #333;
    /* 深灰色文本 */
}

.el-icon-wechat {
    background-image: url("../assets/image/index/weixin.png");
}
</style>